<template>
  <div class="app-container">
    <div class="action-btns">
      <el-button-group>
        <el-button type="info" size="mini" icon="el-icon-refresh" @click="fetchData">刷新</el-button>
      </el-button-group>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >


      <el-table-column align="center" label="名称"   prop="name" />
      <el-table-column align="left" width="150" label="目录"   prop="path" />
      <el-table-column align="left" label="目录备注"   prop="desc" />
      <el-table-column align="center" label="目录大小" width="150" prop="size" />


      <el-table-column align="center"   label="操作" width="150"  >
        <template v-slot:default="{scope,row}">
          <el-row class="row-action-btns">
            <el-button v-if="row.clear===true" size="mini" type="info" icon="el-icon-delete"   @click="del(row.path)">清空</el-button>

          </el-row>
        </template>
      </el-table-column>
    </el-table>


  </div>

</template>

<script>
import api from '@/api/localDir'

export default {
  components: {

  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '1': 'success',
        '0': 'gray',
        '-1': 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        sort: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      api.getList(this.listQuery).then(res => {
        this.list = res.data.list
        this.listLoading = false
      })
    },
    del(path) {
      this.$confirm('此操作将永久清空对应的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.clear({ path: path }).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: res.msg
          })
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }

}
</script>
